<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img :src="$store.state.userInfo.user_pic" alt="" />

      <img :src="frImg" alt="" />

      <!-- 按钮区域 -->
      <div class="btn-box">
        <input
          ref="inputHidden"
          type="file"
          style="display: none"
          name=""
          id=""
          @change="changeImg"
        />
        <el-button type="primary" icon="el-icon-plus" @click="chooseImg"
          >选择图片</el-button
        >
        <el-button type="success" icon="el-icon-upload" disabled
          >上传头像</el-button
        >
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UserAvatar',
  data () {
    return {
      frImg: ''
    }
  },
  methods: {
    /*
    选择图片
      1、点击选择图片按钮=》触发隐藏的input元素的点击事件
      2、使用change获取图片资源文件
      3、使用FileReader  读取文件转换成base64
        3.1 读取文件 readAsDataURL
        3.2 监听文件什么时候读取完毕  onload
        3.3 获取读取之后的值  fr.result
        3.4 将图片展示出来
    上传头像
     */
    chooseImg () {
      //  1、点击选择图片按钮=》触发隐藏的input元素
      this.$refs.inputHidden.click()
    },

    /* 隐藏域的事件 */
    changeImg (e) {
      console.log(e, 4444)
      //  获取图片资源文件
      const file = e.target.files[0]
      //  使用 new   FileReader()  将图片转换成base64
      const fr = new FileReader()
      //  读取文件
      fr.readAsDataURL(file)
      //  监听文件什么时候读取完毕
      fr.onload = () => {
        console.log(this, 6)
        // 获取读取完毕之后的base64图片 fr.result
        // console.log(fr.result, 8)
        this.frImg = fr.result
      }
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
}

img {
  width: 200px;
  height: 200px;
}
</style>
